<template>
  <div class="app-container">
    <div>
        <el-row :gutter="20">
      <el-col :span="6" :xs="24">
      <user-card :user="user"></user-card>
      </el-col>
        <el-col :span="18" :xs="24"><div class="user_mood">信息</div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import UserCard from './components/UserCard.vue' // 卡片
export default {
  components: { UserCard },
  name: 'Personal',
  data () {
    return {
      user: {

      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avator',
      'roles'
    ])
  },
  created () {
    this.getUser()
  },
  mounted () {
    console.log(this.user)
  },
  methods: {
    getUser () {
      this.user = {
        name: this.name,
        avator: this.avator,
        roles: this.roles.join('|')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user{
  background-color: red;
  height:300px;
}
.user_mood{
  background-color: royalblue;
  height: 300px;
}
</style>
